import React from 'react'
import { List, InputItem, WhiteSpace, Switch, Button, Toast } from 'antd-mobile';

import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import {actions as Uaction} from '../../../../reducers/user'

import { createForm } from 'rc-form';

const Item = List.Item

class A extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
          hasError: false,
        }
    }
    
    componentDidMount() {
        let h = document.body.clientHeight
        window.addEventListener('resize', ()=> {
            if ( document.body.clientHeight < h) {
                document.body.style.overflowY = 'scroll'
            } else {
                document.body.style.overflowY  = 'initial'
            }
        })
    }

    submit = () => {
        this.props.form.validateFields((errors, value) => {
            if (value.agree !== true) {
                Toast.fail('请先同意服务条款再使用')
                return false
            }
            console.log(errors,value)
            if (errors) {
              this.setState({hasError: true})
            } else {
              this.props.save_user_role(value)
            }
        });
    }

    render() {
        const { getFieldProps, getFieldError } = this.props.form,
            hasError = this.state.hasError
        return (
            <div className='form-div'>
                <input type='hidden'
                    {...getFieldProps('role', {
                        initialValue: 'publish'
                    })} 
                />
                <List>
                    <List.Item multipleLine wrap>您正在申请需求录入创客，请填写如下的信息以便完成申请过程。</List.Item>
                </List>
                <WhiteSpace/>

                <List>
                    <InputItem
                        {...getFieldProps('username',
                            {rules: [{required: true, message: '真实姓名必须填写'}]}
                        )
                        }
                        type='text'
                        clear
                    >真实姓名
                    </InputItem>
                    {getFieldError('username')&&hasError?<div className='err-msg'>{getFieldError('username')}</div>: null }
                </List>
                <WhiteSpace/>
                
                <List>    
                    <InputItem
                        {...getFieldProps('mobile',
                            {rules: [{required: true, message: '手机号码必须填写'}]}
                        )
                        }
                        type='text'
                        clear
                    >手机号码
                    </InputItem>
                    {getFieldError('mobile')&&hasError?<div className='err-msg'>{getFieldError('mobile')}</div>: null }
                </List>
                <WhiteSpace/>

                <List>
                    <InputItem
                        {...getFieldProps('id_card',
                            {rules: [{required: true, message: '身份证号码必须填写'}]}
                        )
                        }
                        type='text'
                        clear
                    >身份证号码
                    </InputItem>
                    {getFieldError('id_card')&&hasError?<div className='err-msg'>{getFieldError('id_card')}</div>: null }
                </List>
                
                <div className='p-bottom2'>
                <List>
                    <Item
                        extra={
                        <Switch 
                        color="#0ea2ec"
                        {...getFieldProps('agree', {
                            initialValue: true,
                            valuePropName: 'checked',
                        })}/>}
                        >我已阅读并同意《服务条款》
                    </Item>
                </List>
                <Item>
                    <Button type="primary" onClick={this.submit}>提交</Button>
                </Item>
                </div>
            </div>
        )
    }
}

function mapStateToProps(state) {
    return {
      userInfo: state.user.userInfo,
    }
  }
  
  function mapDispatchToProps(dispatch) {
    return  {
       save_user_role: bindActionCreators(Uaction.save_user_role, dispatch),
       get_me: bindActionCreators(Uaction.get_user_info, dispatch),
    }
  }
  
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(createForm()(A))